<!--  -->
<template>
  <div class="Home">
    <div class="componentsBox">
      <statistics @goCustomerVisit="goCustomerVisit" v-if="num==1"></statistics>
      <customerVisit v-if="num==2"></customerVisit>
      <ownershipPlan v-if="num==3"></ownershipPlan>
    </div>
    <div class="Home_imgs">
      <img
        class="Home_imgs_img"
        src="https://media.tongcehaofang.com/image/default/862419AB1E47441FB2487629D3871A89-6-2.jpg"
        alt=""
        srcset=""
      />
    </div>
  </div>
</template>

<script>
import statistics from "./statistics/statistics";
import customerVisit from "./customerVisit/customerVisit";
import ownershipPlan from "./ownershipPlan/ownershipPlan";
export default {
  components: {
    statistics,
    customerVisit,
    ownershipPlan
  },
  data() {
    return {
      num:1,
    };
  },
  computed: {},
  watch: {},
  methods: {
    goCustomerVisit(val){
      if(val=='customerVisit'){
        this.num = 2
      }else if(val=='ownershipPlan'){
        this.num = 3
      }
      
    }
  },
  created() {},
  mounted() {},
};
</script>
<style lang='scss' scoped>
.Home {
  padding: 20px;
  &_imgs {
    position: relative;
    &_img {
      width: 600px;
      position: absolute;
      left: 50%;
      top: 120px;
      transform: translateX(-50%);
    }
  }

 

}
</style>